<hr/>
<div class="row-fluid">
    <div class="span12">
        <button class="btn btn-success" id="btn_save">保存</button>
        <a href="${request.contextPath}/sale/order/info?saleId=${saleId}" class="btn btn-info" id="btn_back">返回订单</a>
        <div class="widget-box">
            <div class="widget-title"> <span class="icon"> <i class="icon-pencil"></i> </span>
                <h5>订单商品</h5>
            </div>
            <div class="widget-content nopadding">
                <form class="form-horizontal" method="post" action="${request.contextPath}/sale/order/saveDetail" name="detail_form" id="detail_form">
                    <input type="hidden" name="detailId" value="${detail.saleDetailId}" />
                    <input type="hidden" name="saleId" value="${saleId}" />
                    <input type="hidden" name="memberId" value="${member.memberId}" />
                    <input type="hidden" name="price" value="0" />
                    <div class="control-group">
                        <label class="control-label">商品类型：</label>
                        <div class="controls">
                            <select name="catalogId">

                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">商品：</label>
                        <div class="controls">
                            <select name="productId">
                                <!--<#list productList as product>-->
                                    <!--<option value="${product.productId}" <#if product.productId == detail.product.productId >selected</#if>>[${product.productCode}]${product.productName}</option>-->
                                <!--</#list>-->
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">商品规格：</label>
                        <div class="controls">
                            <select name="productSkuId">

                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">数量：</label>
                        <div class="controls">
                            <input type="text" name="amount" value="${detail.amount}" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">库存数量：</label>
                        <div class="controls">
                            <span class="help-inline" id="sp_stock"></span>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">售价：</label>
                        <div class="controls">
                            <span class="help-inline" id="sp_unit_price"></span>
                        </div>
                    </div>
                    <!--<div class="control-group">-->
                        <!--<label class="control-label">折扣：</label>-->
                        <!--<div class="controls">-->
                            <!--<span class="help-inline">${member.memberLevel.discount}(%)</span>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="control-group">-->
                        <!--<label class="control-label">合计：</label>-->
                        <!--<div class="controls">-->
                            <!--<span class="help-inline" id="sp_price">${detail.price}</span>-->
                        <!--</div>-->
                    <!--</div>-->
                </form>
            </div>
        </div>
    </div>
</div>
<script src="${request.contextPath}/js/jquery-1.12.2.min.js"></script>
<script src="${request.contextPath}/js/jquery.validate.js"></script>
<script src="${request.contextPath}/js/sweetalert.min.js"></script>
<script src="${request.contextPath}/js/select2.full.min.js"></script>
<script type="text/javascript">

    var catalog_id = "${detail.product.catalog.productCatalogId}";
    var stock_product_id = "${detail.product.productId}";
    var stock_productSku_id = "${detail.productSKU.productSkuId}";
    var discount = parseInt("${member.memberLevel.discount}");
    var catalogList;
    var skuList;

    $(function(){
        initCatalogList();

        stock_product_id = stock_product_id.length > 0 ? stock_product_id : $("select[name='productId']").val();
        getProductSkuList(stock_product_id);

        $("select[name='catalogId']").change(function(){
            initProductList();
        });

        $("select[name='productId']").change(function(){
//            console.log("productId:" + productId);
            getProductSkuList();
        });

        $("select[name='productSkuId']").change(function(){
            var skuId = $(this).val();
//            console.log(skuId);
            $.each(skuList, function(i, n){
                if (n.productSkuId == skuId){
                    $(":input[name='price']").val(n.sellPrice);
                    $("#sp_unit_price").html(n.sellPrice);
                    $("#sp_stock").html(n.stockAmount);
                }
            });
        });

        $("#btn_back").click(function(){
            loadPage($(this).attr("href"));
            return false;
        });

        $("#btn_save").click(function(){
            $("#detail_form").submit();
        });

        $("#detail_form").validate({
            submitHandler: function(form){
                $.ajax({
                    url: $(form).attr("action"),
                    type: "post",
                    data: $(form).serialize(),
                    success: function(result) {
                        if (result.status == "success") {
                            loadPage("${request.contextPath}/sale/order/info?saleId=${saleId}");
                        }
                        else {
                            swal({
                                title: "信息提示",
                                text: "很遗憾，操作失败了！",
                                type: "error",
                                animation: "slide-from-top"
                            });
                        }
                    }
                });
            },
            rules: {
                specName: {
                    "required": true
                }
            },
            errorClass: "help-inline",
            errorElement: "span",
            highlight:function(element, errorClass, validClass) {
                $(element).parents('.control-group').addClass('error');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).parents('.control-group').removeClass('error');
                $(element).parents('.control-group').addClass('success');
            }

        });
    });

    function initCatalogList(){
        $.post("${request.contextPath}/product/getCatalogList", function(result){
            var catalog_select = $("select[name='catalogId']");
            catalogList = result.data;
            $.each(catalogList, function(i, n){
                if (n.productCatalogId == catalog_id){
                    catalog_select.append("<option value='" + n.productCatalogId + "' selected>" + n.catalogName + "</option>");
                }
                else{
                    catalog_select.append("<option value='" + n.productCatalogId + "'>" + n.catalogName + "</option>");
                }
            });
            catalog_select.select2();
            initProductList();
        });
    }

    function initProductList(){
        console.log("init product list");
        var catalogId = $("select[name='catalogId']").val();
        if (catalogId.length > 0){
            $.post("${request.contextPath}/product/getProductListByCatalogId", {catalogId: catalogId}, function(result){
                if (result.status == "success"){
                    var productList = result.data;
                    var product_select = $("select[name='productId']");
                    product_select.html("");
                    $.each(productList, function(i, n){
                        if (n.productId == stock_product_id){
                            product_select.append("<option value='" + n.productId + "' selected>" + n.productName + "</option>")
                        }
                        else{
                            product_select.append("<option value='" + n.productId + "'>" + n.productName + "</option>")
                        }
                    });
                    product_select.select2();
                    getProductSkuList();
                }
            });
        }
    }

    function getProductSkuList(){
        var productId = $("select[name='productId']").val();
        $.post("${request.contextPath}/product/getSkuListByProductId", {productId: productId}, function(result){
//            console.log(result.status);
            if (result.status == "success"){
                var sku_select = $("select[name='productSkuId']");
                sku_select.html("");
                skuList = result.data;
                $.each(result.data, function(i, n){
                    if (i == 0){
                        $(":input[name='price']").val(n.sellPrice);
                        $("#sp_unit_price").html(n.sellPrice);
                        $("#sp_stock").html(n.stockAmount);
                    }
//                    console.log(n.skuName);
                    if (n.productSkuId == stock_productSku_id){
                        sku_select.append("<option value='" + n.productSkuId + "' selected>[" + n.skuCode + "]"+ n.skuName + "</option>");
                        $(":input[name='price']").val(n.sellPrice);
                        $("#sp_unit_price").html(n.sellPrice);
                        $("#sp_stock").html(n.stockAmount);
                    }
                    else{
                        sku_select.append("<option value='" + n.productSkuId + "'>[" + n.skuCode + "]"+ n.skuName + "</option>");
                    }
                });
                sku_select.select2();
            }
        });
    }

    function clearSKU(){
        $("select[name='productSkuId']").html("");
        $(":input[name='price']").val(0);
        $("#sp_unit_price").html(0);
        $("#sp_stock").html(0);
    }
</script>